<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重做错题</title>
    <script th:src="@{/js/vue.js}"></script>
    <script th:src="@{/js/elementui/index.js}"></script>
    <link rel="stylesheet" th:href="@{/css/elementui/index.css}">
    <script th:src="@{/js/axios.js}"></script>
    <script th:src="@{/js/jquery.js}"></script>
    <style>
        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }

        .el-icon-arrow-right:before {
            color: black;
        }

        /*多行超出*/
        .wrap {

            /*让纯数字也可以换行显示*/
            word-break: break-all;


            /*将div变成弹性伸缩盒子模型
			  display:box为display:flex的前身
			  需要加浏览器私有属性来支持
			*/
            display: -webkit-box;
            /*设置或检索伸缩盒的子元素的排列方式
			  目前所有主流浏览器都不支持box-orient属性。
			  Firefox通过私有属性- MOZ-box-orient支持。
			  Safari, Opera, 和 Chrome通过
			  私有属性 -webkit-box-orient 支持.
			*/
            /*值为vertical表示从顶部向底部垂直布置子元素*/
            -webkit-box-orient: vertical;
            /*设置要出现省略号的行数
			  下面的3表示第三行出现省略号
			*/
            -webkit-line-clamp: 3;
            /*设置一个行高，更容易控制行数
			  行高/元素高度=设置出现省略号的行数
			  然后超出的部分隐藏起来
			*/
            line-height: 30px;
            /*超出高度的部分都隐藏起来
			  目的主要是将设置了省略号那一行后面的内容都隐藏起来
			*/
            overflow-y: hidden;

        }

    </style>
</head>
<body>
<div id="app">
    <!--表单-->
    <el-row>
        <el-form :inline="true" :model="examQuery" ref="form" class="demo-form-inline">

            <el-form-item label="题目相关词">
                <el-input v-model="examQuery.title" placeholder="题目相关词"></el-input>
            </el-form-item>

            <el-form-item label="熟悉度">
                <el-select v-model="examQuery.rank" placeholder="熟悉度" clearable>
                    <el-option label="陌生" value="1"></el-option>
                    <el-option label="模糊" value="2"></el-option>
                    <el-option label="熟悉" value="3"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="科目">
                <el-select v-model="examQuery.types" placeholder="科目" clearable>
                    <el-option label="计算机网络" value="1"></el-option>
                    <el-option label="操作系统" value="2"></el-option>
                    <el-option label="计算机组成原理" value="3"></el-option>
                    <el-option label="数据结构" value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="success" plain @click="exportAll">导出所有题目</i></el-button>
                <el-button type="success" plain @click="exportPage">导出此页题目</i></el-button>
                <el-button type="success" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <el-table
            :data="tableData"
            style="width: 100%;
            overflow: scroll;
            max-height: 550px;
            min-height: 550px;"
            :row-key="getRowKeys"
            @expand-change="isAnswer = false"
    >
        <el-table-column type="expand">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                    <div>
                        <el-form-item label="题目">
                            <div v-html="props.row.title"></div>
                        </el-form-item>
                    </div>

                    <div>
                        <el-form-item label="选项A">
                            <span>{{ props.row.optiona }}</span>
                        </el-form-item>
                    </div>

                    <div>
                        <el-form-item label="选项B">
                            <span>{{ props.row.optionb }}</span>
                        </el-form-item>
                    </div>

                    <div>
                        <el-form-item label="选项C">
                            <span>{{ props.row.optionc }}</span>
                        </el-form-item>
                    </div>

                    <div>
                        <el-form-item label="选项D">
                            <span>{{ props.row.optiond }}</span>
                        </el-form-item>
                    </div>

                    <div>
                        <el-form-item label="答案">
                            <el-popover
                                    placement="top-start"
                                    title="提示"
                                    width="200"
                                    trigger="hover"
                                    v-model="visible"
                            >
                                <p>是否已经做完题目要查看答案？</p>
                                <div style="text-align: right; margin: 0">
                                    <el-button size="mini" type="primary" @click="hideAnswer">隐藏</el-button>
                                    <el-button type="primary" size="mini" @click="getAnswer(props.row.answer)">查看
                                    </el-button>
                                </div>
                                <el-button slot="reference" v-if="!isAnswer">查看答案</el-button>
                                <el-button slot="reference" v-else="isAnswer">{{props.row.answer}}</el-button>
                            </el-popover>
                        </el-form-item>
                    </div>


                    <div>
                        <el-form-item label="科目类型">
                            <span v-if="props.row.types == 1">计算机网络</span>
                            <span v-if="props.row.types == 2">操作系统</span>
                            <span v-if="props.row.types == 3">计算机组成原理</span>
                            <span v-if="props.row.types == 4">数据结构</span>
                        </el-form-item>
                    </div>

                    <div>
                        <el-form-item label="附图" aline="center">
                            <div v-if="props.row.image">
                                <el-image style="width: 100px; height: 100px; border:none;cursor: pointer;"
                                          :src="getImage(props.row.image)"
                                          :preview-src-list="[ `/api/img/${props.row.image}` ]">
                                </el-image>
                            </div>
                        </el-form-item>
                    </div>


                    <div>
                        <el-form-item label="笔记">
                            <span>{{ props.row.remark }}</span>
                        </el-form-item>
                    </div>

                    <div>
                        <el-form-item label="熟悉度">
                            <el-rate
                                    style="display: inline-block;line-height: 100%"
                                    v-model="props.row.rank"
                                    show-text
                                    :texts="texts"
                                    :max="3"
                                    @change="changeRank(props.row)">
                            </el-rate>
                        </el-form-item>
                    </div>
                </el-form>
            </template>
        </el-table-column>


        <el-table-column label="题目">
            <template slot-scope="props">
                <div v-html="props.row.title" class="wrap"></div>
            </template>
        </el-table-column>
        <el-table-column
                prop="optiona"
                label="选项A"
        ></el-table-column>
        <el-table-column
                prop="optionb"
                label="选项B"
        >
        </el-table-column>
        <el-table-column
                prop="optionc"
                label="选项C"
        ></el-table-column>
        <el-table-column
                prop="optiond"
                label="选项D"
        ></el-table-column>
        <el-table-column
                prop="types"
                label="科目"
        >
            <template slot-scope="scope">
                <span v-if="scope.row.types == 1">计算机网络</span>
                <span v-if="scope.row.types == 2">操作系统</span>
                <span v-if="scope.row.types == 3">计算机组成原理</span>
                <span v-if="scope.row.types == 4">数据结构</span>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
            color="#67c23a"
    >
    </el-pagination>
</div>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                expands: [], // 只展开一行放入当前行id
                getRowKeys: (row) => { // 获取当前行id
                    return row.id; // 这里看这一行中需要根据哪个属性值是id
                },
                isAnswer: false,
                visible: false,
                tableData: [],
                //错题本数据
                exam: {
                    id: "",
                    title: "",
                    optionA: "",
                    optionB: "",
                    optionC: "",
                    optionD: "",
                    answer: "",
                    types: "",
                    image: "",
                    remark: "",
                    rank: ""

                },
                examQuery: {
                    title: "",
                    types: "",
                    rank: ""
                },
                pageSize: 10,
                page: 1,
                total: 0,//总记录数
                imageUrl: '',
                texts: ['不熟悉', '模糊', '熟悉']
            };
        },
        created() {
            this.getAll();
        },
        methods: {
            expandColumn(row, expandedRows) {
                this.isAnswer = false;
                // 每次只展开一行
                let that = this;
                if (expandedRows.length) {
                    that.expands = []
                    if (row) {
                        that.expands.push(row.id)
                    }
                } else {
                    that.expands = []
                }
            },
            hideAnswer() {
                this.isAnswer = false;
                this.visible = false;
            },
            getAnswer(answer) {
                this.isAnswer = true;
                this.visible = false;
            },

            downloadExcel(blobPart, filename) {
                const blob = new Blob([blobPart], {type: 'application/vnd.ms-excel'})
                console.log('downloadExcel', blob.size)
                // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
                const elink = document.createElement('a')
                elink.download = decodeURIComponent(filename)
                elink.style.display = 'none'
                elink.href = URL.createObjectURL(blob)
                document.body.appendChild(elink)
                elink.click()
                URL.revokeObjectURL(elink.href) // 释放URL 对象
                document.body.removeChild(elink)
            },
            //导出全部题目
            exportAll() {
                //提示
                this.$confirm("是否导出全部题目为excel？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    //导出全部题目
                    axios({
                        method: "get",
                        url: "/question/exportAll",
                        responseType: "blob",
                    }).then((resp) => {
                        // if (resp.data.code == 200) {
                        this.downloadExcel(resp.data, "全部题目.xlsx");
                        this.$message({
                            type: "success",
                            message: "导出成功",
                        });
                        // }
                    });
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消导出",
                    });
                });
            },
            //导出当前页题目
            exportPage() {
                console.log(this.tableData);
                //提示
                this.$confirm("是否导出当前页题目为excel？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    //导出全部题目
                    axios({
                        method: "post",
                        url: "/question/exportPage",
                        data: this.tableData,

                        responseType: "blob",
                    }).then((resp) => {
                        // if (resp.data.code == 200) {
                        this.downloadExcel(resp.data, "用户题目.xlsx");
                        this.$message({
                            type: "success",
                            message: "导出成功",
                        });
                        // }
                    });
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消导出",
                    });
                });
            },
            //查询方法
            onSubmit() {
                this.getAll();
            },
            getAll() {
                var param = "?title=" + this.examQuery.title;
                param += "&types=" + this.examQuery.types;
                param += "&rank=" + this.examQuery.rank;
                axios.get("/question/" + this.page + "/" + this.pageSize + param).then(res => {
                    this.total = res.data.total;
                    this.tableData = res.data.records;
                });
            },
            getImage(image) {
                return `/api/img/${image}`;
            },
            //修改熟悉度
            changeRank(ee) {
                axios.put("/question", ee).then((resp) => {
                    if (resp) {
                        this.$message({
                            type: 'success',
                            duration: 1000,
                            message: '修改熟悉度成功!'
                        });
                    }
                })
            },
            //处理页码大小和当前页变动时候触发的事件
            handleSizeChange(val) {
                this.pageSize = val;
                this.getAll();
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getAll();
            }
        }
    })


</script>
</body>
</html>